/* ====================================================== 
   5. Basic Layout Styles                                        
/* ====================================================== */
/* 5.1. Bootstrap 3.x */
/* New XL container for Bootstrap 3.x */
.container {
	width: auto;
	max-width: 1170px;
}

@media all and (min-width: 1430px) {
	.container {
	    max-width: 1278px;
	}
}

/* New XXL container for Bootstrap 3.x */
@media all and (min-width: 1600px) {
	.container {
	    max-width: 1410px;
	}
}


.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

/* Center column in a row,
 CSS used here will be applied after bootstrap.css */
.row-center {
    text-align: center;
	
	> [class*='col-'] {
		display: inline-block;
		float: none;
	}
}





/* 5.2. Material Container */
.container-bg {
	position: relative;
	z-index: 2;
	background: #fff;
	box-shadow: 0px 0px 51px -5px rgba(0,0,0,0.1);
	margin-bottom: 10rem;
	min-height: 50vh;
	
	&.fillet-large {
		border-radius: 15px;
	}
	
	&.fillet-medium {
		border-radius: 7px;
	}
	
	&.fillet-small {
		border-radius: 2px;
	}
	
}



.container-bg-totop {
	&.totop-large {
		margin-top: -15rem;
	}
	
	&.totop-medium {
		margin-top: -10rem;
	}
	
	&.totop-small {
		margin-top: -5rem;
	}
	
}


@media all and (max-width: 768px) { 
	
	.container-bg {
		margin-bottom: 3rem;
	}

	.container-bg-totop {
		&.totop-large {
			margin-top: -7rem;
		}

		&.totop-medium {
			margin-top: -4rem;
		}

		&.totop-small {
			margin-top: -2rem;
		}
	}		
}

/* 5.3 Main Wrapper */
/* Note: Do not use the "transform" property, otherwise it may affect the internal elements */
.wrapper {
	min-height: 100%;
	width: 100%;
	overflow: hidden;
}


/* 5.4 Seamless Grid */
$seamless-grid-pad : 15px;

.seamless-grid-container {
	width: 100%;
	
	.seamless-grid,
	[class*='seamless-col-'] {
	    box-sizing: border-box;
	}
	

	.seamless-grid {

		width: calc( 100% + #{$seamless-grid-pad} );

		&:after {
			/* Or @extend clearfix */
			content: "";
			display: table;
			clear: both;
		}

		.content {
			word-wrap: break-word;
			position: relative;
		}

		
		&.no-gutter {
			
			width: 100%;
			
			> [class*='seamless-col-'] {
			    padding-right: 0 !important;
	    	}
		  
		}		


	}


	[class*='seamless-col-'] {
		float: left;
		padding-right: $seamless-grid-pad;
		margin-bottom: $seamless-grid-pad/2;

		.seamless-grid &:last-of-type {
			padding-right: 0;
		}
		.seamless-grid &:last-of-type .content {
			width: calc(100% - #{$seamless-grid-pad}); 
		}	



		
	}


	.seamless-col-2-3 {
		width: 66.666666666667%;
	}
	.seamless-col-1-3 {
		width: 33.333333333333%;
	}
	.seamless-col-1-2 {
		width: 50%;
	}
	.seamless-col-1-4 {
		width: 25%;
	}
	.seamless-col-3-4 {
		width: 75%;
	}

	.seamless-col-1-5 {
		width: 20%;
	}
	.seamless-col-2-5 {
		width: 40%;
	}

	.seamless-col-3-5 {
		width: 60%;
	}

	.seamless-col-4-5 {
		width: 80%;
	}

	.seamless-col-1-6 {
		width: 16.66666666666667%;
	}



	.seamless-grid.loop .seamless-col-1-2:nth-child(2n+1),
	.seamless-grid.loop .seamless-col-1-3:nth-child(3n+1),
	.seamless-grid.loop .seamless-col-1-4:nth-child(4n+1),
	.seamless-grid.loop .seamless-col-1-6:nth-child(6n+1) {
		clear: both;
	}


	
}




@media all and (max-width: 991px) {
	
	.seamless-grid-container {
		
	
		/* Loop */
		.seamless-grid.loop .seamless-col-1-3:nth-child(3n+1) {
			clear: none;
		}

		.seamless-grid.loop .seamless-col-1-4,
		.seamless-grid.loop .seamless-col-1-3 {
			width: 50%;
		}

		.seamless-grid.loop .seamless-col-1-4:nth-child(2n+1),
		.seamless-grid.loop .seamless-col-1-3:nth-child(2n+1) {
			clear: both;

		}

		
		/* 2 columns */
		.seamless-grid.use-2 .seamless-col-1-6,
		.seamless-grid.use-2 .seamless-col-1-4,
		.seamless-grid.use-2 .seamless-col-1-3 {
			width: 50%;
			float: left;
		}

		.seamless-grid.use-2 .seamless-col-1-6:nth-child(2n+1),
		.seamless-grid.use-2 .seamless-col-1-4:nth-child(2n+1),
		.seamless-grid.use-2 .seamless-col-1-3:nth-child(2n+1) {
			padding-right: $seamless-grid-pad;
			clear: both;

		}


	}
	


	
}


@media all and (max-width: 768px) {
	
	
	.seamless-grid-container {
		
		.seamless-grid {
			&.no-gutter {
				width: calc(100% + #{$seamless-grid-pad});
			}	
		}
		
		[class*='seamless-col-'] {
			float: none;
			width: calc(100% - #{$seamless-grid-pad});
			padding-left: 0;
			padding-right: 0;
		}

		
		/* Loop */
		.seamless-grid.loop .seamless-col-1-2:last-of-type,
		.seamless-grid.loop .seamless-col-1-3:last-of-type,
		.seamless-grid.loop .seamless-col-1-4:last-of-type,
		.seamless-grid.loop .seamless-col-1-6:last-of-type {
			padding-right: $seamless-grid-pad;
			width: 100%;
		}

		.seamless-grid.loop.no-gutter .seamless-col-1-2:last-of-type,
		.seamless-grid.loop.no-gutter .seamless-col-1-3:last-of-type,
		.seamless-grid.loop.no-gutter .seamless-col-1-4:last-of-type,
		.seamless-grid.loop.no-gutter .seamless-col-1-6:last-of-type {
			width: calc(100% - #{$seamless-grid-pad});
		}
		
		.seamless-grid.loop .seamless-col-1-2:last-of-type .content,
		.seamless-grid.loop .seamless-col-1-3:last-of-type .content,
		.seamless-grid.loop .seamless-col-1-4:last-of-type .content,
		.seamless-grid.loop .seamless-col-1-6:last-of-type .content {
			width: 100%;
		}

		
		.seamless-grid.loop .seamless-col-1-2,
		.seamless-grid.loop .seamless-col-1-3,
		.seamless-grid.loop .seamless-col-1-4,
		.seamless-grid.loop .seamless-col-1-6 {
			width: calc(100% - #{$seamless-grid-pad});
		}

		
		/* Loop & 2 columns */
		.seamless-grid.loop.use-2 .seamless-col-1-2:last-of-type,
		.seamless-grid.loop.use-2 .seamless-col-1-3:last-of-type,
		.seamless-grid.loop.use-2 .seamless-col-1-4:last-of-type,
		.seamless-grid.loop.use-2 .seamless-col-1-6:last-of-type {
			width: 50%;
		}
		
		.seamless-grid.loop.use-2.no-gutter .seamless-col-1-2:last-of-type,
		.seamless-grid.loop.use-2.no-gutter .seamless-col-1-3:last-of-type,
		.seamless-grid.loop.use-2.no-gutter .seamless-col-1-4:last-of-type,
		.seamless-grid.loop.use-2.no-gutter .seamless-col-1-6:last-of-type {
			width: calc(50% - #{$seamless-grid-pad/2});
		}
		
		/* 2 columns */
		.seamless-grid.use-2 .seamless-col-1-6,
		.seamless-grid.use-2 .seamless-col-1-4,
		.seamless-grid.use-2 .seamless-col-1-3 {
			width: 50%;
			float: left;
			margin-bottom: 0;
		}
		
		.seamless-grid.use-2.no-gutter .seamless-col-1-6,
		.seamless-grid.use-2.no-gutter .seamless-col-1-4,
		.seamless-grid.use-2.no-gutter .seamless-col-1-3 {
			width: calc(50% - #{$seamless-grid-pad/2});
		}
	
		
		.seamless-grid.use-2 .seamless-col-1-6:nth-child(2n+1),
		.seamless-grid.use-2 .seamless-col-1-4:nth-child(2n+1),
		.seamless-grid.use-2 .seamless-col-1-3:nth-child(2n+1) {
			clear: both;

		}


		.seamless-grid.use-2 .seamless-col-1-6:nth-child(2n+0),
		.seamless-grid.use-2 .seamless-col-1-4:nth-child(2n+0),
		.seamless-grid.use-2 .seamless-col-1-3:nth-child(2n+0) {
			padding-right: $seamless-grid-pad;

		}
		
		


	}


	
}
